<style lang="scss" scoped>
// ::v-deep .el-radio {
//   display: block;
//   margin: 10px 0;
// }
// .remark {
//   color: rgb(37, 137, 255);
//   cursor: pointer;
//   text-decoration: underline;
//   font-weight: bold;
//   margin: 3px 0;
// }
// ::v-deep .el-radio {
//   display: block;
//   margin: 10px 0;
// }
.remark {
  color: rgb(37, 137, 255);
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  margin: 17px 0;
  font-size: 16px;
}
.el-checkbox ::v-deep .el-checkbox__label {
  font-size: 16px;
  line-height: 2;
}
.el-checkbox ::v-deep .el-checkbox__inner {
  width: 15px;
  height: 15px;
  // margin-bottom: 5px;
}
.el-radio ::v-deep .el-radio__label {
  font-size: 16px;
  line-height: 2;
}
.el-radio ::v-deep .el-radio__inner {
  width: 15px;
  height: 15px;
  // margin-bottom: 5px;
}
</style>
<template>
  <div>
    <el-form :model="form" ref="form" size="large">
      <!-- 触发比例 -->
      <el-row style="margin: 15px 0">
        <el-form-item label="01-采购到货商品可分比例" prop="triggerRatio">
          <el-input
            style="width: 240px"
            v-model="form.triggerRatio"
            placeholder="请输入比例"
            clearable
          />%

          <span class="remark" style="font-size: 16px">
            说明：当选择按订单类型分货时，入仓累计可分配商品大于总采购货量30%才做分配
          </span>
        </el-form-item>
        <el-form-item label="" prop="isCompletedAssigned">
          <el-checkbox
            true-label="0"
            false-label="1"
            v-model="form.isCompletedAssigned"
          >
            采购订单完结时，扣减掉留仓比例后，将到货商品全部分完
            <span class="remark">
              说明:默认开启，在采购订单完结状态下，不判断比例，全部分完
            </span>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="" prop="triggerGranularity">
          <el-radio-group
            v-model="form.triggerGranularity"
            size="small"
            fill="#66b1ff"
            @change="changeSkc"
          >
            <el-radio :label="'item'">按款式Item计算可分比例</el-radio>
            <el-radio :label="'spu'">按SPU计算可分比例</el-radio>
            <el-radio :label="'skc'">按SKC计算可分比例</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <!-- 商品留仓比例 -->
      <el-row :inline="true">
        <el-form-item label="02-商品留仓比例" prop="productStockRatio">
          <el-input
            style="width: 240px"
            v-model="form.productStockRatio"
            placeholder="请输入比例"
            clearable
          />
          %

          <span class="remark" style="font-size: 16px">
            说明:总仓库存商品0%留仓，100%参与配货
          </span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="" prop="isCompletedRemained">
          <el-checkbox
            true-label="0"
            false-label="1"
            v-model="form.isCompletedRemained"
          >
            按采购订单分货时，最后一次分货不保留留仓比例
            <span class="remark">
              说明:开启后，最后一次分货，全部将留仓商品分配到分仓
            </span>
          </el-checkbox>
        </el-form-item>
        <el-form-item label="" prop="allocationGranularity">
          <el-radio-group
            v-model="form.allocationGranularity"
            size="small"
            fill="#66b1ff"
            @change="changeSkc"
          >
            <el-radio :label="'item'">按款式Item计算可分比例</el-radio>
            <el-radio :label="'spu'">按SPU计算可分比例</el-radio>
            <el-radio :label="'skc'">按SKC计算可分比例</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>

      <!-- 03-优先分配规则 -->
      <el-row :inline="true">
        <el-form-item label="03-优先分配规则" prop="productStockRatio">
          <span class="remark" style="font-size: 16px">
            说明:根据店铺采购订单计划量，优先满足配货需求优先级高的店铺的配货深度(预留字段)
          </span>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="" prop="allocationGranularity">
          <el-radio-group
            v-model="form.priorityAllocationMode"
            size="small"
            fill="#66b1ff"
          >
            <el-radio :label="'item'">深度优先</el-radio>
            <el-radio :label="'spu'">宽度优先</el-radio>
            <!-- <el-radio :label="'skc'">按SKC计算可分比例</el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-form-item
        label="04-其他分配规则"
        prop="allocationGranularity"
      ></el-form-item>
      <el-form-item label="" prop="isBrokenSizeStrategyActive">
        <el-checkbox
          true-label="0"
          false-label="1"
          v-model="form.isBrokenSizeStrategyActive"
        >
          断码不分货
          <span class="remark">
            说明：开启后，当商品存在齐码规则且到货不满足齐码规则时，该商品当次不进行分货
            <el-button
              style="margin-left: 5px"
              type="primary"
              plain
              size="mini"
              @click="openInfo = true"
            >
              设置齐码规则
            </el-button>
          </span>
        </el-checkbox>
      </el-form-item>
      <el-dialog
        :visible.sync="openInfo"
        width="1500px"
        append-to-body
        v-if="openInfo"
      >
        <AllocationBrokenSizeStrategy :strategyCode="form.strategyCode" />
      </el-dialog>
      <el-row>
        <el-col :span="4">
          <el-radio-group
            v-model="form.priorityAllocationMode"
            size="medium"
            type="vertical"
          >
            <el-radio
              style="display: block; margin: 10px 0"
              :label="'ALLOCATION_BY_SALES_QUANTITY'"
              >SKC库存为0，不配货</el-radio
            >

            <el-radio
              style="display: block; margin: 10px 0"
              :label="'ALLOCATION_BY_SOLD_OUT_RATE'"
            >
              不成套不分货</el-radio
            >
            <el-radio
              style="display: block; margin: 10px 0"
              :label="'ALLOCATION_BY_SALES_VELOCITY'"
              >异常商品自动再分配</el-radio
            >
            <!-- <el-radio :label="'CUSTOM_PRIORITY'"
              >自定义优先级<el-button
                style="margin-left: 5px"
                type="primary"
                plain
                size="mini"
                @click="opentagkey"
                >设置优先级</el-button
              ></el-radio
            > -->
          </el-radio-group></el-col
        >
        <el-col :span="12">
          <div class="remark">
            说明：（仅适用于按商品分货）开启后，单店内的商品skc库存为0，则下一次货品到仓该SKC不配货
          </div>
          <!-- <div class="remark">
            
          </div> -->
          <div class="remark">
            说明：开启后，当商品存在套装规则且到货不满足套装规则时，该商品当次不进行分货
            设置套装规则
          </div>
          <div class="remark">
            说明：开启后，首次配货后的异常商品将再重新分配
          </div>
          <!-- <div class="remark">说明：可自定义根据设置好的优先级进行该次分货</div> -->
        </el-col>
      </el-row>

      <!-- <el-form-item label="方案编码" prop="strategyCode">
        <el-input v-model="form.strategyCode" placeholder="请输入方案编码" />
      </el-form-item>
      <el-form-item label="方案名称" prop="strategyName">
        <el-input v-model="form.strategyName" placeholder="请输入方案名称" />
      </el-form-item>
      <el-form-item label="优先级" prop="priorityLevel">
        <el-input v-model="form.priorityLevel" placeholder="请输入优先级" />
      </el-form-item>
      <el-form-item label="配货来源" prop="allocationSource">
        <el-input
          v-model="form.allocationSource"
          placeholder="请输入配货来源"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入品牌" />
      </el-form-item>
      <el-form-item label="生效开始日期" prop="effectiveStartDate">
        <el-date-picker
          clearable
          v-model="form.effectiveStartDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效开始日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="生效结束日期" prop="effectiveEndDate">
        <el-date-picker
          clearable
          v-model="form.effectiveEndDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生效结束日期"
        >
        </el-date-picker>
      </el-form-item> -->

      <el-form-item style="width: 100%; text-align: center">
        <!-- <el-button @click="submitnote('noticForm')" type="primary"
        >笔记合作</el-button
      > -->
        <el-button style="margin-top: 12px" @click="prev">上一步</el-button>
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        <el-button style="margin-top: 12px" @click="submitForm"
          >保存草稿</el-button
        >
        <!-- <el-button @click="resetForm" style="margin-left: 10px"
        >一键清空</el-button
      > -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import AllocationBrokenSizeStrategy from "@/views/productAllocation/AllocationBrokenSizeStrategy/index.vue";
import {
  listStrategy,
  getStrategy,
  delStrategy,
  addStrategy,
  updateStrategy,
} from "@/api/productAllocation/strategy";
export default {
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    AllocationBrokenSizeStrategy,
  },
  data() {
    return {
      openInfo: false,
      // 表单参数
      form: {
        isCompletedAssigned: "1",
        isCompletedRemained: "1",
        productStockRatio: 0,
      },
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        if (newnew) {
          this.form = newnew;
          // this.form.id=newnew
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    changeSkc(val) {
      this.form.triggerGranularity = val;
      this.form.allocationGranularity = val;
    },
    prev() {
      this.updateForm();
      this.$emit("prev");
    },
    next() {
      if (this.form.triggerRatio % 1 != 0 || this.form.triggerRatio > 100) {
        this.$modal.msgError("请输入整数小于100采购到货商品可分比例");
        return;
      }

      if (
        this.form.productStockRatio % 1 != 0 ||
        this.form.productStockRatio > 100
      ) {
        this.$modal.msgError("请输入整数小于100商品留仓比例例");
        return;
      }

      this.updateForm();

      this.$emit("next");
    },
    /** 提交按钮 */
    updateForm() {
      if (this.form.triggerRatio % 1 != 0 || this.form.triggerRatio > 100) {
        this.$modal.msgError("请输入整数小于100采购到货商品可分比例");
        return;
      }

      if (
        this.form.productStockRatio % 1 != 0 ||
        this.form.productStockRatio > 100
      ) {
        this.$modal.msgError("请输入整数小于100商品留仓比例例");
        return;
      }

      if (this.form.isCompletedAssigned != "0") {
        this.form.isCompletedAssigned = "1";
      }
      if (this.form.isCompletedRemained != "0") {
        this.form.isCompletedRemained = "1";
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              // this.$modal.msgSuccess("修改成功");
              //   this.open = false;
              //   this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              //   this.open = false;
              //   this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
            });
          }
        }
      });
    },
  },
};
</script>